<template>
  <div class="com-page" @dblclick="revertOption">
    <div ref="container" class="com-container" />
  </div>
</template>

<script>
import { setEcharts, setEchartOptions } from '@/api/echarts/map.js'
export default {
  data() {
    return {
      seriesData: ''
    }
  },
  async mounted() {
    await this.initCharts()
    this.setEcharts()
    window.addEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 获取echarts的数据
    async initCharts() {
      const { data } = await this.$http.get('/map')
      this.seriesData = data
    },
    // 渲染echarts图表 柱形图
    setEcharts() {
      setEcharts(this.$refs.container, this.seriesData)
    },
    revertOption() {
      this.setEcharts()
    },
    // 屏幕分辨率 改变时 option 变化
    screenAdapter() {
      const titleFontSize = (this.$refs.container.offsetWidth / 100) * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        series: {
          barWidth: titleFontSize,
          itemStyle: {
            barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
          }
        }
      }
      setEchartOptions(this.$refs.container, adapterOption)
    }
  }
}
</script>

<style lang="scss" scoped></style>
